<template>
  <div class="container">
    <elm-header title="密码登录" :isBack="true"
      @onBack="$router.back()"
    ></elm-header>
    <div class="scroller">
      <!-- 登录/注册表单 -->
      <van-form ref="formRef"
       @submit="onSubmit" 
       style="margin-top:.16rem"
      >
        <van-field
          v-model="username"
          name="username"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          name="password"
          type="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field v-model="captcha_code" name="captcha_code"  
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <img class="captchas-img" :src="captch_data" alt="">
            <div class="captchas-btn" @click="getCaptchData">
              <p>看 不 清</p>
              <p>换 一 张</p>
            </div>
          </template>
        </van-field>
        <p class="tips">温馨提示：未注册过的账号，登录时将自动注册</p>
        <p class="tips">注册过的用户可凭账号密码登录</p>
        <div style="margin: 16px;">
          <van-button class="submit-btn" block native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import elmHeader from '../../components/elmHeader'
import {getCaptchas} from '../../api/profile'
import {mapActions} from 'vuex'
import {LOGIN} from '../../store/mutationTypes'
export default {
  components:{
    'elm-header':elmHeader
  },
  created(){
    this.getCaptchData()
  },
  data(){
    return{
      username:'',
      password:'',
      captcha_code:'',
      captch_data:null
    }
  },
  methods:{
    ...mapActions('profile',[LOGIN]),
    // 获取验证码
    async getCaptchData(){
      try {
        const {code} = await getCaptchas()
        this.captch_data = code
      } catch (err) {
        console.log(err);
      }
    },
    // 提交数据，登录
    async onSubmit(data){
      //使用onSubmit,如果数据验证不通过不会调用该函数
      try {
        const res = await this[LOGIN](data)
        // 成功
        this.$toast('登录成功')
        this.$router.back()
      } catch (err) {
        // 失败
        this.$toast(err.message)
      }
       
    }
  }
}
</script>
<style lang='scss' scoped>
@import '../../styles/var.scss';
.container{
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  .scroller{
    margin-top: .45rem;
    flex: 1;
    .submit-btn{
      color: #fff;
      background-color: #4cd964;
    }
    /deep/ .van-field__button{
      position: absolute;
      right: 0;
      top: -12px;
    }
    .captchas-img{
      height: .34rem;
      min-width: .5rem;
      max-width: 1.5rem;
    }
    .captchas-btn{
      display: inline-block;
      font-size: .14rem;
      transform: scale(.8);
    }
    .captchas-btn>p:first-child{
      color: #333;
    }
    .captchas-btn>p:last-child{
      color: $primary;
    }
    .tips{
      padding: .1rem .16rem .04rem;
      color: red;
      font-size: .12rem;
    }
  }
}
</style>